<template>
  <view class="commodity-details">
<!--    <swipe>
      <swipe-item v-for="(image, index) in images" :key="index">
        <image :src="image.picUrl"></image>
		
	  </swipe-item>
    </swipe> -->
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
		<swiper-item v-for="(image, index) in images" :key="index">
			<image :src="image.picUrl"></image>
		</swiper-item>
	</swiper>
	
    <view class="commodity-details-a">
      <van-row>
        <van-col text="18" style="text-align: left">
          <view style="font-weight: bolder;margin-bottom: 0.5rem">{{product.categoryName}}|{{product.productName}}</view>
          <view style="display: inline-block">￥<text style="font-size: 1.5rem;font-weight: bolder">{{product.price}}</text></view>
          <view style="display: inline-block;font-size: 0.5rem;margin-left: 0.5rem">销量:<text>1w+</text></view>
        </van-col>
        <van-col text="6" style="float: right;">
          <van-icon name="share-o" size="22"/>
          <view>分享</view>
        </van-col>
      </van-row>
    </view>
    <view class="commodity-details-b">
      <van-row>
        <van-col text="18" style="text-align: left">
          <van-tag plain type="primary" color="red">店铺优惠券</van-tag>
        </van-col>
        <van-col text="6" style="float: right;padding-right: 0.5rem;position: relative" @click="showCoupon = true">
          <view style=" color:red;font-size: 0.9rem;display: inline-block">领券<van-icon name="arrow" size="13" color="red"/></view>
        </van-col>
      </van-row>
    </view>
    <van-viewider/>
    <view class="commodity-details-c">
      <van-row>
        <van-col text="3">
          <van-image round width="2.2rem" height="2.2rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
        </van-col>
        <van-col text="13" style="text-align: left">
          <view>{{product.shopsName}}</view>
          <view style="display: inline-block"><van-icon name="balance-o" />已缴纳******保证金</view>
          <!-- <view style="display: inline-block">距离1.8km</view> -->
        </van-col>
		<view class="gm" @click="toShop" style="text-align: center; float: right; background-color: #07c160;border-radius: 40rpx;width: 200rpx;height: 50rpx;font-size: 18rpx;color: #fff;line-height: 50rpx;">
			<text>进店逛逛</text>
		</view>
       <!-- <van-col text="7" style="float: right;">
          <van-button round type="primary" size="mini" color="#d78b1a" style="padding: 0 0.8rem" @click="toShop">进店逛逛</van-button>
        </van-col> -->
      </van-row>
      <van-row style="font-size: 0.7rem;padding: 0.1rem 1rem">
        <van-col text="8" style="text-align: right"><van-icon size="14" name="passed" color="blue"/>质量保障</van-col>
        <van-col text="8"><van-icon name="passed" color="blue"/>优质服务</van-col>
        <van-col text="8" style="text-align: left"><van-icon name="passed" color="blue"/>七天无理由退货</van-col>
      </van-row>
    </view>
    <van-viewider/>
    <view class="commodity-details-f">
      <van-row>
        <van-col text="3">已选</van-col>
        <van-col text="16"  style="text-align: left" >选择 规格</van-col>
        <van-col text="3"><van-icon name="arrow" size="14" style="position: absolute;right: 1rem;"/></van-col>
      </van-row>
    </view>
    <van-viewider/>
    <view class="commodity-details-i" align="left">
      <van-tabs type="card">
        <van-tab title="商品介绍" style="padding: 1rem 1rem">
          <view style="font-size: 1rem;margin-bottom: 0.1rem">产品信息</view>
          <view>{{product.descript}}</view>
        </van-tab>
        <van-tab title="商品评价" style="padding: 1rem 1rem">
          <view style="font-size: 1rem;margin-bottom: 0.1rem">产品评价</view>
          <view>{{product.descript}}</view>
        </van-tab>
      </van-tabs>
    </view>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车"/>
      <van-goods-action-icon icon="shop-o" text="店铺" />
	  <view class="shopcar" @click="showCar = true" style="width: 240rpx;background-color: #ff9d19;height: 80rpx;border-radius: 40rpx;line-height: 80rpx;text-align: center;color: #FFF;">
	  	<text>加入购物车</text>#f11c27
	  </view>
<view class="shopcar" @click="showCar = true" style="width: 240rpx;background-color: #f11c27;height: 80rpx;border-radius: 40rpx;line-height: 80rpx;text-align: center;color: #FFF;">
	  	<text>立即购买</text>
	  </view>
    </van-goods-action>

	<echone-sku
	  :show="show"
	  :theme-color="themeColor"
	  :combinations="combinations"
	  :specifications="specifications"
	  :default-select-index="selectedIndex"
	  @close="handleClose"
	  @confirm="handleConfirm"
	></echone-sku>
	
	<echone-sku
	  :show="showCar"
	  :theme-color="themeColor"
	  :combinations="combinations"
	  :specifications="specifications"
	  :default-select-index="selectedIndex"
	  @close="handleCloseCar"
	  @confirm="handleConfirmCar"
	></echone-sku>
	
    <van-popup v-model="showCoupon" round position="bottom" closeable :style="{ height: '70%' }">
      <view class="container">
        <h1 style="color: red;font-size: 18px">优惠明细</h1>
        <view class="coupon-list">
          <view class="sawtooth-bor item" v-if="preferentialCard.length >0" v-for="preferential in preferentialCard">
            <view class="pt10 discount" style="padding-top: 10px;">
              <view class="fs12">{{preferential.preferentialName}}</view>
              <view class="fs12">满{{preferential.preferentialPriceMost}}减{{preferential.preferentialPrice}}</view>
              <view class="fs12">有效期{{preferential.modifiedTime}} - {{preferential.preferentialTime}}</view>
            </view>
            <view class="textc receive" @click="receivePreferential(preferential)">立即领取</view>
          </view>
          <van-viewider />
          <h1 style="color: red;font-size: 18px;margin-bottom: 0.5rem"
          v-if="platformCoupon != null">平台优惠活动</h1>
          <view class="sawtooth-bor item">
            <view class="pt10 discount" style="padding-top: 10px;">
              <view class="fs12">{{platformCoupon.platformName}}</view>
              <view class="fs12">满{{platformCoupon.platformPriceMost}}减{{platformCoupon.platformPrice}}</view>
              <view class="fs12">有效期{{platformCoupon.platformTimeStart}} - {{platformCoupon.platformTimeEnd}}</view>
            </view>
            <view class="textc receive" @click="receivePlatformCoupon(platformCoupon)">立即领取</view>
          </view>
        </view>
      </view>
    </van-popup>

  </view>
</template>

<script>

  import { selectProductById,selectProductLableByProId,selectSupplierCoupon,selectPpiUrl } from '@/api/commodity/shop_product.js'
  import { installCustomerCode,addPlatformCouponCustomerCode } from '@/api/customer/customer.js'
  import { addOrderShoppingCart } from '@/api/commodity/shopping_cart.js'
  import echoneSku from '@/components/echone-sku/echone-sku.vue'
  import { Toast } from "vant";

  export default {
    data(){
      return {
        showCoupon:false,
        images: [],
        current: 0,
        product :{},
        supplierId: Object,
		// 购买显示
        show: false,
		// 购物车显示
		showCar:false,
        productId: Number,
        // 平台优惠券
        platformCoupon :{},
        // 店铺优惠券
        preferentialCard :{},
        //添加购物车的参数
        orderShoppingCart:{
          productId:'',
          productLabelId:'',
          productNumber:'',
        },
		
		
		themeColor: '#1ac792',
		combinations: [],
		specifications: [],
		selectedIndex: 0,
      };
    },
	components: {
	    echoneSku,
	},
	onLoad: function (option) {
		let id = parseInt(option.commodityId);
		console.log("commodityId:"+option.commodityId);
		// let id = 13;
		this.productId = id;
		this.getProductById(id);
		this.getSelectPpiUrl(id);
		this.customSkuValidator(id);
	},
    methods: {
      toBack(){
        this.$router.go(-1);//返回上一层
      },
      onChange(index) {
        this.current = index;
      },
      toShop(){
		  uni.navigateTo({
		  	url:'/pages/shop_home/shop_home?shopId='+this.supplierId
		  });
      },
      getProductById(productId){
        selectProductById(productId).then((res) => {
          this.product = res.data.data;
          this.supplierId = res.data.data.supplierId;
          // this.goods_info.title = res.data.data.productName;
          // this.sku.price = res.data.data.price;
          this.getSupplierCoupon(res.data.data.supplierId);
        });
      },
      purchase(){
        this.show = true;
      },
      customSkuValidator(productId){
		selectProductLableByProId(productId).then((res) =>{
			if(res.data.data.length>0){
				// console.log(JSON.stringify(res.data.data));
				console.log("this.specifications.list:"+this.specifications.name);
				let skuList = [];
				for (let i = 0; i < res.data.data.length; i++){
					  this.combinations.push({
						  id:res.data.data[i].labelId.toString(),
						  value:res.data.data[i].labelName,
						  image:res.data.data[i].productPicInfo.picUrl,
						  price:(res.data.data[i].labelPrice),
						  stock:(res.data.data[i].labelQuantity),
					  });
					  skuList[i] = res.data.data[i].labelName
				}
				this.specifications.push({
					"name":"规格",
					"id":productId,
					"list":skuList,
				})
			}else{
				let skuList = [];
				skuList[0] = "暂无规格"
				this.combinations.push({
					id:"1",
					value:"暂无规格",
					image:"",
					price:0,
					stock:0,
				});
				this.specifications.push({
					"name":"规格",
					"id":productId,
					"list":skuList,
				})
			}
        });
      },
	  // 购买商品
	  handleClose() {
	  	this.show = false
	  },
	  // 立即购买
	  handleConfirm(obj) {
		// this.$router.push({path:"/pages/OrderDetails/OrderDetails",query:{skuId: obj.id,productId:this.product.productId,selectedNum:obj.count}});
	  	uni.navigateTo({
	  		url:'/pages/OrderDetails/OrderDetails?skuId='+obj.id+"&productId="+this.product.productId+"&selectedNum="+parseInt(obj.count)
	  	})
		// console.log(JSON.stringify(obj));
	 //  	this.show = false;
	  },
	  // 加入购物车
	  handleCloseCar() {
	  	this.showCar = false
	  },
	  // 立即加入购物车
	  handleConfirmCar(obj) {
		this.orderShoppingCart.productId = this.product.productId;
		this.orderShoppingCart.productLabelId = obj.id;
		this.orderShoppingCart.productNumber = obj.count;
	  	if(this.orderShoppingCart.productLabelId != ''){
	  	  addOrderShoppingCart(this.orderShoppingCart).then((res)=>{
	  	    if(res.data==1){
	  	      Toast({
	  	        message: "添加购物车成功",
	  	        position: "top"
	  	      });
	  	      this.showCar = false;
	  	    }
	  	  })
	  	}
	  },
      // 查询店铺优惠券
      getSupplierCoupon(id){
        selectSupplierCoupon(id).then((res) =>{
          this.preferentialCard = res.data.preferentialCard;
          this.platformCoupon = res.data.platformCoupon;
          console.log(res.data)
        })
      },
      // 领取店铺优惠券
      receivePreferential(preferential){
        installCustomerCode(preferential).then((res) =>{
          if(res.data.code == 200){
            Toast({
              message: "领取成功",
              position: "top"
            });
          }else{
            Toast({
              message: "领取失败,请勿重复领取",
              position: "top"
            });
          }
        })
      },
      // 领取平台优惠券
      receivePlatformCoupon(platformCoupon){
        platformCoupon.supplierId = this.supplierId;
        addPlatformCouponCustomerCode(platformCoupon).then((res) =>{
          if(res.data.code == 200){
            Toast({
              message: "领取成功",
              position: "top"
            });
          }else{
            Toast({
              message: "领取失败,请勿重复领取",
              position: "top"
            });
          }
        })
      },
      //根据商品的id查询规格图片的轮播
      getSelectPpiUrl(productId){
        selectPpiUrl(productId).then((res)=>{
			this.images = res.data.data;
        })
      },

    },
  }
</script>

<style scoped>
	swiper image{
		width: 100%;
	}
  .commodity-details{
      color: black;
      padding-bottom: 60px;
    }
    .demo-nav{
      position: relative;
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: center;
      justify-content: center;
      height: 56px;
      background-color: #fff;
      font-size: 1.1rem;
    }
    .demo-nav__back{
      position: absolute;
      top: 16px;
      left: 16px;
      width: 24px;
      height: 24px;
      cursor: pointer;
    }
    .demo-nav__right{
      position: absolute;
      top: 18px;
      right: 16px;
    }
    .commodity-details-a{
      padding: 0.5rem 1rem;
    }
    .commodity-details-a p{
      font-size: 0.8rem;
    }
    .commodity-details-b{
      padding: 0 1rem;
    }
    .commodity-details-c{
      padding: 0.3rem 1rem;
    }
    .commodity-details-c p{
      font-size: 0.75rem;
      padding: 0.2rem 0;
    }
    .commodity-details-e{
      padding: 0.3rem 1rem;
      position: relative;
      font-size: 0.5rem;
    }
    .commodity-details-f{
      padding: 0.3rem 1rem;
      font-size: 0.5rem;
      position: relative
    }
    .commodity-details-i{
      padding: 0.3rem 1rem;
    }
    .commodity-details-i p{
      font-size: 0.6rem;
    }
  
    .container {
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
      padding-top: 18px;
    }
  
    .coupon-list {
      width: 370px;
      margin: 0 auto;
    }
  
    .coupon-list .item:first-child {
      margin-top: 20px;
    }
  
    .coupon-list .item {
      width: 370px;
      height: 90px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
    }
    /* 第一个 */
    .sawtooth-bor {
      display: flex;
      color: #fff;
      padding-left: 0.5rem;
      box-sizing: border-box;
      /* 画出一个半径为8rpx的透明的圆，透明圆以外都是#ffb937颜色 */
      background: radial-gradient(transparent 0, transparent 8px, #F35C3B 8px);
      /* 截取上面生成的渐变图的一部分，相当于截取30rpx的正方形中有一个直径10px的透明圆点 */
      background-size: 30px 28px;
      /* 根据优惠券div大小进行微调 */
      background-position: 16px 0px;
      background-color: #fff;
      position: relative;
    }
  
    .sawtooth-bor:before {
      content: ' ';
      display: block;
      /* 用相同的颜色覆盖 */
      background-color: #F35C3B;
      /* 绝对定位，遮住中间所有的洞，只保留边角的锯齿 */
      position: absolute;
      top: 0;
      bottom: 0;
      /* 为锯齿保留的距离 */
      left: 20px;
      right: 20px;
      z-index: -1;
    }
  
    .discount {
      border-right: 2px dashed #f5f5f5;
      padding: 10px;
      flex: 1;
      box-sizing: border-box;
      background-color: #F35C3B;
    }
  
    .receive {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 104px;
      height: 100%;
      padding: 20px;
      box-sizing: border-box;
      background-color: #ffb937;
    }

</style>
